<template>
    <div class="list" :class="msgContent?.isSend ? 'send' : 'receive'">
        <template v-if="msgContent?.isSend">
            <div class="chat-content">
                <div class='content-box text-box'>
                    <chat-text-content :msgContent='msgContent'></chat-text-content>
                </div>
                
                <div class='content-box' v-if="false">
                    <chat-image-content></chat-image-content>
                </div>
            </div>
            <user-avatar
                class="avatarUrl"
                :name="userInfo?.name"
                :isCircle="false"
                :isSingleName="true"
                :isBig="true"
                :avatarUrl="userInfo?.avatarUrl"
            ></user-avatar>
        </template>

        <template v-else>
            <img :src="getAssetsFile('robot.png')" class="robot">
            <div class="chat-content">
                <div class='content-box text-box'>
                    <chat-text-content :msgContent='msgContent' ref="textContent"></chat-text-content>
                    <slot></slot>
                </div>
                
                <div class='content-box' v-if="false">
                    <chat-image-content></chat-image-content>
                </div>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
    import { ref,watchEffect,onMounted,defineProps,defineExpose } from 'vue'
    import {type UserInfo} from '../../utils/interface'
    import ChatTextContent from './ChatTextContent.vue'
    import ChatImageContent from './ChatImageContent.vue'
    import getAssetsFile from '../../utils/pub-use'
    import { useAuthStore} from '../../stores/auth'
    import UserAvatar from '../UserAvatar.vue'
    const authStore = useAuthStore()
    const userInfo = ref({
        name:"",
        avatarUrl:""
    })
    const textContent = ref()
    const messageList = ref([])
    const cellDom = ref()
    // const props = defineProps<{
    //     msgContent: {
    //         messageId: string
    //         messageType: string
    //         isSend: boolean
    //         msgContent: any
    //         createTime: string
    //     },
    // }>()
    const props = defineProps({
        msgContent:{
            type:Object,
            default:()=>{}
        }
    })
    onMounted(() => {
        cellDom.value = textContent.value?.$el;
        userInfo.value = authStore.getUserInfo()
        watchEffect(authStore.userInfo, (newVal, oldVal) => {
            console.log(`userInfo 改变: ${oldVal} -> ${newVal}`)
            userInfo.value = authStore.userInfo.value
        })
    })
    defineExpose({cellDom})
</script>

<style scoped lang="scss">
    .list{
        display: flex;
        align-items: start;
        img{
            display: block;
            width: 36px;
            height: 36px;
            border:none;  
        }
        .chat-content{
            display: flex;
            flex-direction: column;
            max-width: calc(100% - 48px - 48px);
            color: var(--crp-text-color-important);
            .content-box:not(:last-child){
                margin-bottom: var(--crp-margin-base);
            }
            .text-box{
                box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.04);
            }
        }
    }
    .list:not(:last-child){
        margin-bottom: var(--crp-margin-base);
    }
    .send{
        justify-content: flex-end;
        .chat-content{
            align-items: flex-end;
        }
        .avatarUrl{
            margin-left: var(--crp-margin-middle);
            margin-top: var(--crp-margin-little);
        }
    }
    .receive{
        justify-content: flex-start;
        .chat-content{
            align-items: flex-start;
        }
        .robot{
            margin-top: var(--crp-margin-little);
            margin-right:var(--crp-margin-middle);
        }
    }
</style>
